<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--js本地存储-->
<hr>
<input type="text" id="username"><br>
<input type="radio" name="sex" id="boy" value="男" checked>男
<input type="radio" name="sex" id="girl" value="女">女<br>
<button id="save_btn">添加</button>
<button id="search">查询所有</button>
<table>
    <thead>
    <tr>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    </thead>
    <tbody id="data">

    </tbody>
</table>
<script type="text/javascript">
    class Stu{
        constructor(name,sex) {
            this.name=name;
            this.sex=sex;
        }
        //把对象转换为json格式的字符串
        toJsonString(){
            return JSON.stringify(this);
        }
    }
    //操作本地存储
    class DbUtil{

        save(key,value){
            let flag=false;
            //先按照key在storage中查询，如果有数据表示key已存在
            let v=localStorage.getItem(key);
            //如果不存在，我们就保存
            if(!v)
            {
                localStorage.setItem(key,value);
                flag=true;
            }
            return flag;
        }
        //按照主键查询
        findByKey(key){
            let v=localStorage.getItem(key);
            if(!v){
                return "";
            }
            //把数据转换为json对象，并返回
            let json=JSON.parse(v);
            return json;
        }
        findAll(){
            let stus=[];
            let size=localStorage.length;
            for(let i=0;i<size;i++){
                let key=localStorage.key(i);
                //此时 v 是 string
                let v=localStorage.getItem(key);
                //转为json对象
                let json=JSON.parse(v);
                //把json对象添加到数组中
                stus.push(json);
            }
            return stus;
        }
    }
    document.getElementById("save_btn").onclick=()=>{
        let name=document.getElementById("username").value;
        let sex="男";
        if(document.getElementById("girl").checked)
        {
            sex="女";
        }
        //构建学生类的对象
        let stu=new Stu(name,sex);
        let db=new DbUtil();
        let flag=db.save(name,stu.toJsonString());
        if(flag)
        {
            alert("成功!");
        }else{
            alert("失败");
        }
    }
    document.getElementById("search").onclick=()=>{
        let db=new DbUtil();
        //返回的是json格式的数组
        let stus=db.findAll();
        let msg="";
        for(let stu of stus)
        {
            //stu获取数据拼接一个固定格式的字符串
            //<tr><td>张三</td><td>男</td></tr>
            msg+=`<tr>
                        <td>${stu.name}</td>
                        <td>${stu.sex}</td>
                     </tr>`;
        }
        document.getElementById("data").innerHTML=msg;
    }
</script>
</body>
</html>
